<template>
    <div>
        <div class="submit_order_box">
            <div id="submitOrder1">
                <div class="fixed_top fixed_top_img" id="fixed_top" style="display: none;">
                    
                    <div class="ft_left"><i class="h_l_coin"></i></div>
                    <div class="ft_name">物流送达</div>
                    <div class="ft_addr"><span class="ft_addr_sp" id="txtAddress2">请填写收货地址</span><i class="ft_add_coin"></i></div>
                </div>
                <div class="so_top" id="so_top">
                    <img src="https://m.9bianli.com/Images/order/so_bg1.png" class="top_bg">
                    <div class="head">
                        <div class="h_left so_top_back">
                            <router-link to="/cart">
                                <span class="h_l_coin"></span>
                            </router-link>
                        </div>
                        <h1 id="head_h1">
                            <span style="display:none;">预售订单</span>
                            <span style="display:block">填写订单</span>
                        </h1>
                    </div>
                    <div class="order_tip_box">                        
                    </div>
                    <div class="order_national_top" style="display:block">
                        <div class="order_national_top_box">
                            <div class="ont_left">
                                <i class="ont_coin"></i>
                            </div>
                            <div class="ont_right">
                                <div>预计送达时间2-5天</div>
                                <div>实际送达时间以第三方物流为准</div>
                            </div>
                        </div>
                    </div>
                    <div class="top_addr">
                        <div class="t_a_bg">
                            <div class="ta_go_address">
                                <div v-if="addressIfo" class="ta_add" id="ta_add">
                                    <div class="ta_add_r">
                                        <div class="ta_add_r_m" id="txtAddress">{{addressIfo[0].name}}</div><div class="ta_add_r_coin"><i class="ta_add_coin so_coin"></i></div>
                                    </div>
                                    <div class="ta_add_name"><span id="txtname">{{addressIfo[0].province}}</span><span class="phone" id="txtphone">{{addressIfo[0].tel}}</span></div>
                                </div>
                                <div v-else class="ta_add_no" id="ta_add_no">请填写收货地址<i class="so_coin addr_coin"></i></div>
                            </div> 
                            <!-- <div class="ta_national_box" id="ta_national_box">
                                <div class="ta_national">
                                    <i class="ta_na_coin"></i>全国送订单由第三方物流为您配送
                                </div>
                            </div>                             -->
                        </div>
                    </div>
                </div>
                <div class="so_bottom">
                    <div class="so_goods">
                        <div class="goods_control">
                            
                            <span class="gc_num" style="display: block;">共1件商品</span>
                             
                            <div class="goods_control_span gc_main"><span>收起</span><i class="gc_coin so_coin"></i></div>
                        </div>
                        <div class="goods_list" id="goods_list">
                            
                            <div class="goods_des" v-for="(item,index) in cartIfo" :key="index">
                                <a>
                                <div class="gl_img">
                                    <img :src="item.ItemImagePath" onerror="this.src='https://m.9bianli.com/Images/nofound.png'">
                                </div>
                                <div class="gl_box">
                                    <div class="name">{{item.VariantName}}</div>
                                    <div class="mos"><span class="glb_num">x1</span><del class="glb_old_money">¥{{item.OldPrice}}.00</del><span class="glb_new_money">¥{{item.NowPrice}}.00</span></div>
                                </div>
                                </a>
                            </div>
                            <div class="flc_money">
                                <span class="rmb">¥ </span><span class="number">52.00</span>
                            </div>
                        </div>
                    </div>
                    <div class="so_box1">
                        <div class="so_fee_display" style="display: block;">
                            <div class="so_fee ">
                                <div class="so_fee_left">
                                    配送费
                                    
                                    <img src="https://m.9bianli.com/Images/order/logistics_send.png" class="logistics_send">
                                                                        
                                </div>
                                <div class="so_fee_r">
                                    <del class="glb_old_money" id="fee_old"></del><span class="glb_new_money" id="fee_new">¥ 15.00</span>
                                </div>
                            </div>
                        </div>                        
                        
                        <div style="display:block">
                            <div class="shipping_hongbao">
                                <div class="hongbao"><span style="position: absolute;">红包 </span></div>
                                <div class="hongbaoinfo_new">暂无红包可用</div>                                
                                <i class="so_coin have_coin hb_new_coin"></i>
                                <input type="hidden" name="hdHongBaoCode" id="hdHongBaoCode">
                            </div>
                        </div>
                        <div style="display:block">
                            <div class="shipping_coupon">
                                <div class="coupon"><span style="position: absolute;">优惠券</span></div>
                                <div class="couponInfo">暂无优惠券可用</div>
                                <i class="so_coin have_coin"></i>
                                <input type="hidden" name="hdPromotionCouponCode" id="hdPromotionCouponCode">
                                <input type="hidden" name="hdCouponRealUseAmount" id="hdCouponRealUseAmount" value="0">
                                <input type="hidden" name="hdTemporaryCoupon" id="hdTemporaryCoupon">
                            </div>
                        </div>
                        <div class="so_box1_total">合计<label class="so_rmb">¥ </label><span class="number so_totalAmount">{{totalPrice+15}}.00</span></div>
                    </div>
                    <div class="so_box1">      
                        <div class="debit_note">
                            <div class="note">订单备注</div>
                            <div class="note_info">
                                <span class="write_remarks">请填写备注内容</span><i class="so_coin have_coin"></i>
                            </div>
                        </div>
                        <div class="invoice_info">
                            <div class="invoice_name">发票信息</div>
                            <div class="invoice_content">
                                <span id="yes" class="invoice_title" style="">不开发票</span>
                                <i class="so_coin have_coin"></i>
                            </div>
                            <input type="hidden" name="hdInvoiceHeader" id="hdInvoiceHeader">
                            <input type="hidden" name="hdInvoiceTaxNo" id="hdInvoiceTaxNo">
                            <input type="hidden" name="hdInvoiceEmail" id="hdInvoiceEmail">
                            <input type="hidden" name="hdInvoiceAddress" id="hdInvoiceAddress">
                            <input type="hidden" name="hdInvoicePhone" id="hdInvoicePhone">
                            <input type="hidden" name="hdInvoiceBank" id="hdInvoiceBank">
                            <input type="hidden" name="hdInvoiceAccount" id="hdInvoiceAccount">
                        </div>
                    </div> 
                    <div id="clubwelfares" class="clubwelfares">
                    </div>                 
                </div>
                <div class="so_foot_box">
                    <div class="so_foot_fee">差47.00元免15.00元配送费</div>
                    <div class="so_foot">
                        <div class="so_f_money">
                            <span class="now_money"><span class="rmb">¥ </span><span class="so_totalAmount">{{totalPrice+9}}.00</span></span>
                            <span class="old_money">已优惠 ¥6.00</span>                 
                            
                        
                        </div>
                        <div class="so_f_submit">
                            <input type="submit" name="btnNext" value="确认下单" onclick="return checkInfo();" id="btnNext" class="btnsubmit" data-role="none">
                        </div>
                    </div>
                </div>                
            </div>
            <div id="hongbao_pop" class="hongbao_pop">
                <div class="pop_header">
                    <div class="header_top">
                        <div class="h_left coupon_cancel">
                            <span class="h_l_coin"></span>
                        </div>
                        <h1>使用红包</h1>
                    </div>
                    <div class="cpb_title">您可以同时使用<span>0</span>个红包</div>
                </div>
                <ul class="hb_tab_conbox" id="tab_hongbao_conbox">
                    
                </ul>
                <div class="hongbao_footer">
                    
                    <span class="hongbao_sure" style="">确 定</span>
                </div>
            </div>            
        </div>
    </div>
</template>

<script>
    export default {
        data(){
            return{
                cartIfo:null,
                totalPrice:0,
                addressIfo:null
            }
        },
        created () {
            this.cartIfo =this.$store.state.cart.cartIfo;//获取购物车信息
            this.cartIfo.forEach(item=>{
                this.totalPrice+=item.NowPrice*item.itemNum
            });
            this.addressIfo=this.$store.state.addressList.addressList
            console.log(this.addressIfo)
        },
    }
</script>
<style lang="css" src="../assets/css/pay.css" scoped></style>
<style lang="scss" scoped>
body {
    margin: 0 auto;
    max-width: 640px;
    height: 100%;
    /*font-size: 62.5%;*/
    -webkit-text-size-adjust: 100% !important;
}
html, body, div, h1, h2, h3, h4, h5, h6,ul,li,  ol, dl, dt, dd, blockquote, pre, form, fieldset, table, th, td, span,input{padding:0;margin:0px auto;font-family: Adobe Heiti Std,微软雅黑,sans-serif;}
li{ text-decoration:none; list-style-type:none;}
ul{ list-style-type:disc;}
.clearfix:after{clear:both;display: block;content: "...";visibility: hidden;height: 0;font-size: 0;}
.clearfix{*zoom:1;}
a{ color: #000;text-decoration: none;font-family: Adobe Heiti Std,微软雅黑,sans-serif;font-size: 14px;}
.red{ color: #cc0000;}
input {
    -webkit-appearance: none;
}
/*ul ,ol { list-style:none; margin:0px; padding:0px;}*/
</style>